import w0 from "@/assets/w0.png";
import w1 from "@/assets/w1.png";
import w2 from "@/assets/w2.png";
import w4 from "@/assets/w4.png";
import w5 from "@/assets/w5.png";
import w6 from "@/assets/w6.png";
import w7 from "@/assets/w7.png";
import w8 from "@/assets/w8.png";
import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarTitle from "@/components/AvatarTitle";
import HitPointsModeText from "@/components/HitPointsModeText";
import JudgmentModeText from "@/components/JudgmentModeText";

import { GetCommentAPI } from "@/type/wwwAPI";
import { formatText, getQuitStatusValue } from "@/utilities/Utility";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { useMemo } from "react";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import { getDatetime } from "taehui-lib/date";

const ws = [w0, w1, w2, "", w4, w5, w6, w7, w8];

export default function CommentView({
  date,
  avatarID,
  avatarName,
  stand,
  band,
  point,
  isBand1,
  commentary,
  isTargetAvatar,
  judgmentMode,
  hitPointsMode,
  isPaused,
  handled,
}: GetCommentAPI["comments"][number]) {
  const { quit, quitCss } = useMemo(
    () => getQuitStatusValue(point, stand),
    [point, stand],
  );
  const t = useTranslations();

  return (
    <Row as={Link} href={`/avatar/!${avatarID}`} className="flex-nowrap">
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col className="cc">
        <Stack gap={2}>
          <AvatarTitle
            avatarID={avatarID}
            avatarName={avatarName}
            className="ellipsis"
          />
          <HitPointsModeText
            hitPointsMode={hitPointsMode}
            text={t("textStand", { value: formatText(stand) })}
          />
          {commentary && <span className="ellipsis">💬 {commentary}</span>}
        </Stack>
      </Col>
      <Col xs="auto">
        <Stack gap={2}>
          <span className="date">{getDatetime(date)}</span>
          <Stack gap={2} direction="horizontal">
            <JudgmentModeText
              judgmentMode={judgmentMode}
              text={`${(100 * point).toFixed(2)}％`}
            />
            <span>{t("textBand", { value: band })}</span>
            {isPaused && "⏸️"}
          </Stack>
        </Stack>
      </Col>
      <Col xs="auto">
        <span className={`quit ${quitCss}`}>{quit}</span>
        {isBand1 && "FULL"}
      </Col>
      <Col xs="auto">
        <Image src={ws[handled]} width={10} height={60} alt="" />
      </Col>
    </Row>
  );
}